import { PageContainer } from "@ant-design/pro-components";
import { Button, Modal, Form, Checkbox } from "antd";
import { connect } from "umi";
import { namespace } from "./configFile";
import { useEffect } from "react";
import styles from "./styles.less";

const Page = (props) => {
  const { dispatch, wechatArr, submitLoading, tenantId } = props;
  const [form] = Form.useForm();
  // const [formData, setFormData] = useState([])
  useEffect(() => {
    dispatch({
      type: `${namespace}/pageInit`,
    });
  }, []);
  console.log(wechatArr);

  const toggleState = (checked, key, val) => {
    let { type } = val;
    dispatch({
      type: `${namespace}/toggleState`,
      params: {
        type,
        key,
        tenantId,
        sendFlag: checked,
      },
      callback: () => {},
    });
  };

  return (
    <PageContainer className={styles.weChat}>
      {wechatArr.map((item, key) => (
        <div className={styles.card} key={key}>
          <div className={styles.title}>{item.title}</div>
          <div className={styles.content}>
            {item.list.map((val, index) => (
              <div className={styles.item} key={key + index}>
                <Checkbox
                  defaultChecked={val.sendFlag}
                  onChange={(e) =>
                    toggleState(e.target.checked, val.templateKey, val)
                  }
                />
                <span>{val.msgTemplateName}</span>
                <Button
                  type="link"
                  style={{ marginLeft: "auto" }}
                  onClick={() =>
                    Modal.info({
                      title: "消息模版",
                      content: (
                        <div
                          dangerouslySetInnerHTML={{
                            __html: val.msgTemplateContent,
                          }}
                        />
                      ),
                    })
                  }
                >
                  查看消息模板
                </Button>
              </div>
            ))}
          </div>
        </div>
      ))}
      {/* <Button
        loading={submitLoading}
        onClick={toggleState}
        type="primary">确认保存</Button> */}
    </PageContainer>
  );
};

export default connect((state) => ({
  ...state[namespace],
  submitLoading: state.loading.effects[`${namespace}/toggleState`],
}))(Page);
